<template>
  <div class="home">
    <HomeTop />
    <div class="slideshow">
      <!-- <div class="lunbotu">
        <img src="../assets/imgs/home/banner_1.jpg" alt="" />
      </div> -->
      <div class="swiper-wrap">
        <swiper ref="mySwiper" :options="swiperOptions">
          <swiper-slide>
            <img src="../assets/imgs/home/banner_1.jpg" alt="" />
          </swiper-slide>
          <swiper-slide>
            <img src="../assets/imgs/home/banner_1.jpg" alt="" />
          </swiper-slide>
          <swiper-slide>
            <img src="../assets/imgs/home/banner_1.jpg" alt="" />
          </swiper-slide>
          <swiper-slide>
            <img src="../assets/imgs/home/banner_1.jpg" alt="" />
          </swiper-slide>
        </swiper>
      </div>
    </div>
    <div class="slideshow_box animate-el">
      <div class="slideshow_box_top">
        <span class="slideshow_box_top-data"> 16年</span>
        <span class="slideshow_box_top-text">14年匠心研发</span>
      </div>
      <div class="slideshow_box_top">
        <span class="slideshow_box_top-data">1000+</span>
        <span class="slideshow_box_top-text">覆盖城市</span>
      </div>
      <div class="slideshow_box_top">
        <span class="slideshow_box_top-data">10W+</span>
        <span class="slideshow_box_top-text">实体商户</span>
      </div>
      <div class="slideshow_box_top">
        <span class="slideshow_box_top-data">10Ww</span>
        <span class="slideshow_box_top-text">商户</span>
      </div>
    </div>
    <div class="question">
      <div class="question_box">您是否有以下困扰？</div>
      <div class="shot-line"></div>
      <div class="concrete">
        <div class="concrete_question animate-el">
          <span class="iconfont location"></span>
          <div class="question_text animate-el">定位不清晰 经营难</div>
        </div>
        <div class="concrete_question animate-el">
          <span class="iconfont yingxiao"></span>
          <div class="question_text animate-el">营销成本高 引流难</div>
        </div>
        <div class="concrete_question animate-el">
          <span class="iconfont chengyuan"></span>
          <div class="question_text animate-el">客户留不住 留存难</div>
        </div>
        <div class="concrete_question animate-el">
          <span class="iconfont lianqinliandongliliang"></span>
          <div class="question_text animate-el">员工流动大 管理难</div>
        </div>
      </div>
    </div>
    <div class="serve">
      <div class="serve_left">
        <div class="serve_left_bg">
          <img src="../assets/imgs/home/what.png" alt="" />
          <div class="serve_left_bg_text">我们能够为您做什么？</div>
          <div class="serve_left_sass zoomin">
            <img src="../assets/imgs/home/sass.png" alt="" />
            <div class="sass_op">
              <div class="sass_op_in">
                <span class="iconfont xitong"></span>
                <p class="sass_op_in_p">SAAS系统</p>
                <div class="sass_op_in_shot-line"></div>
                <div class="sass_op_in_neirong">
                  <p class="sass_op_in_neirong_p">SAAS系统帮您高效管理门店,</p>
                  <p class="sass_op_in_neirong_p">节约成本</p>
                </div>
              </div>
            </div>
          </div>
          <!-- <div class="onin"> -->
            <div class="serve_left_h5 zoomin">
              <img src="../assets/imgs/home/h5.png" alt="" />
              <div class="pic_inside1">
                <div class="pic_inside1_in">
                  <span class="iconfont shangcheng"></span>
                  <p class="pic_inside1_in_p">H5商城</p>
                  <div class="pic_inside1_in_shot-line"></div>
                  <div class="pic_inside1_in_neirong">
                    <p class="pic_inside1_in_neirong_p">
                      H5商城为您提供资源整合,
                    </p>
                    <p class="pic_inside1_in_neirong_p">实现共享经济</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="serve_left_solve zoomin">
              <img src="../assets/imgs/home/solve.png" alt="" />
              <div class="pic_inside2">
                <div class="pic_inside2_in">
                  <span class="iconfont jiejuefangan"></span>
                  <p class="pic_inside2_in_p">解决方案</p>
                  <div class="pic_inside2_in_shot-line"></div>
                  <div class="pic_inside2_in_neirong">
                    <p class="pic_inside2_in_neirong_p">超级门店解决方案,</p>
                    <p class="pic_inside2_in_neirong_p">
                      一站式解决您的经营管理难题!
                    </p>
                  </div>
                </div>
              </div>
            <!-- </div> -->
          </div>
        </div>
      </div>
      <div class="serve_right">
        <div class="serve_right_ip zoomin">
          <img src="../assets/imgs/home/ip.png" alt="" />
          <div class="pic_inside3">
            <div class="pic_inside3_in">
              <span class="iconfont jiejuefangan"></span>
              <p class="pic_inside3_in_p">IP系统</p>
              <div class="pic_inside3_in_shot-line"></div>
              <div class="pic_inside3_in_neirong">
                <p class="pic_inside3_in_neirong_p">
                  IP系统为您快速实现引流拓客,
                </p>
                <p class="pic_inside3_in_neirong_p">提升收益</p>
              </div>
            </div>
          </div>
        </div>
        <div class="serve_right_bg"></div>
      </div>
    </div>
    <div class="function_box">
      <div class="function_box_top">
        <ul>
          <li>3大软件系统,9项核心功能</li>
          <li>强大的多元功能，帮您高效管店拓客</li>
        </ul>
        <div class="function_box_top_shite"></div>
      </div>
      <div class="function-container">
        <ul>
          <li class="animate-el">
            <div class="function-item">
              <div class="svg-wrap">
                <img src="../assets/imgs/home/icon/dianwu.png" alt="" />
              </div>
              <p>店务管理</p>
            </div>
            <div class="function-item">
              <div class="svg-wrap">
                <img src="../assets/imgs/home/icon/shouyin.png" alt="" />
              </div>
              <p>收银管理</p>
            </div>
            <div class="function-item">
              <div class="svg-wrap">
                <img src="../assets/imgs/home/icon/shangping.png" alt="" />
              </div>
              <p>商品管理</p>
            </div>
          </li>
          <li class="animate-el">
            <div class="function-item">
              <div class="svg-wrap">
                <img src="../assets/imgs/home/icon/huiyuan.png" alt="" />
              </div>
              <p>会员管理</p>
            </div>
            <div class="function-item">
              <div class="svg-wrap">
                <img src="../assets/imgs/home/icon/yuangong.png" alt="" />
              </div>
              <p>员工管理</p>
            </div>
            <div class="function-item">
              <div class="svg-wrap">
                <img src="../assets/imgs/home/icon/liansuo.png" alt="" />
              </div>
              <p>连锁管理</p>
            </div>
          </li>
          <li class="animate-el">
            <div class="function-item">
              <div class="svg-wrap">
                <img src="../assets/imgs/home/icon/baobiao.png" alt="" />
              </div>
              <p>报表管理</p>
            </div>
            <div class="function-item">
              <div class="svg-wrap">
                <img src="../assets/imgs/home/icon/shangcheng.png" alt="" />
              </div>
              <p>商城定制</p>
            </div>
            <div class="function-item">
              <div class="svg-wrap">
                <img src="../assets/imgs/home/icon/yingxiao.png" alt="" />
              </div>
              <p>营销拓客</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="customization_box">
      <div class="marketing-caption">
        <img src="../assets/imgs/home/marketing.png" alt="" />
        <h2 class="animate-el">专业运营团队,12大营销手段</h2>
        <div class="bot-line"></div>
        <p class="animate-el">1v1量身定制,有效提高营销收益</p>
      </div>
      <div class="marketing-container">
        <ul>
          <li class="animate-el">
            <div class="marketing-item">
              <span class="iconfont-pic"></span>
              企业诊断
            </div>
            <div class="marketing-item">
              <span class="iconfont-pic"></span>
              品牌塑造
            </div>
            <div class="marketing-item">
              <span class="iconfont-pic"></span>
              IP打造
            </div>
          </li>
          <li class="animate-el">
            <div class="marketing-item">
              <span class="iconfont-pic"></span>
              精准定位
            </div>
            <div class="marketing-item">
              <span class="iconfont-pic"></span>
              精准投放
            </div>
            <div class="marketing-item">
              <span class="iconfont-pic"></span>
              精准营销
            </div>
          </li>
          <li class="animate-el">
            <div class="marketing-item">
              <span class="iconfont-pic"></span>
              私域流量
            </div>
            <div class="marketing-item">
              <span class="iconfont-pic"></span>
              活动策划
            </div>
            <div class="marketing-item">
              <span class="iconfont-pic"></span>
              内容运营
            </div>
          </li>

          <li class="animate-el">
            <div class="marketing-item">
              <span class="iconfont-pic"></span>
              商城运营
            </div>
            <div class="marketing-item">
              <span class="iconfont-pic"></span>
              社群运营
            </div>
            <div class="marketing-item">
              <span class="iconfont-pic"></span>
              数据分析
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="solution_box">
      <div class="solution_box_top animate-el">
        <div class="solution_box_top1">超级门店解决方案</div>
        <div class="solution_box_top2">
          尊享个性化私人订制，灵活拓展，售后无忧
        </div>
        <div class="solution_box_shite"></div>
      </div>
      <div class="solution_box_img">
        <img class="zoomin" src="../assets/imgs/home/super_shop.png" alt="" />
      </div>
      <div class="solution_box_last animate-el">
        <p>
          国内首家汇集数据中心、人像采集、CRM系统为一体的聚合解决方案,助力商家打造超级门店，
        </p>
        <p>
          全网多渠道轻松获客，实现一对一个性化营销，高效拓锁留升，流量自循环~
        </p>
      </div>
    </div>
    <div class="scope">
      <div class="scope_right">
        <p class="animate-el">
          专业服务于实体商家,无论是您是单店还是连锁品牌,是街边小店还是星级商家,在云浩皆可找到适合您的解决方案!尊享VIP私人订制,
          对症下药，有效解决门店拓留锁升难题，客流/业绩持续增长
        </p>
      </div>
      <div class="scope_left"></div>
      <div class="scope_cenent">
        <img src="../assets/imgs/home/scope.png" alt="" />
        <img src="../assets/imgs/home/figure_1.png" alt="" />
        <p>适用范围</p>
        <span>专注于实体商家，经验丰富，值得信赖</span>
      </div>
    </div>

    <div class="partner_box">
      <div class="partner_box_1">
        <h2>合作伙伴</h2>
        <p>累计帮助10万+实体商家实现高效管店拓客，快速提升收益</p>
        <div class="shout"></div>
      </div>
      <div class="partner_box_2">
        <div class="log-wrap">
          <ul class="log-slide" :style="'left:' + logLeft + '%;'">
            <li class="row">
              <ul>
                <li class="col">
                  <img
                    class="zoomin"
                    src="../assets/imgs/home/logo/hutaoli.jpg"
                    style="margin-left: 32px"
                    alt=""
                  />
                </li>
                <li class="col">
                  <img
                    class="zoomin"
                    src="../assets/imgs/home/logo/lufeng.jpg"
                    style="margin-left: 32px"
                    alt=""
                  />
                </li>
                <li class="col">
                  <img
                    class="zoomin"
                    src="../assets/imgs/home/logo/onhair.png"
                    alt=""
                  />
                </li>
                <li class="col">
                  <img
                    class="zoomin"
                    src="../assets/imgs/home/logo/instyle.png"
                    alt=""
                  />
                </li>
                <li class="col">
                  <img
                    class="zoomin"
                    src="../assets/imgs/home/logo/mingliu.jpg"
                    style="margin-left: 32px"
                    alt=""
                  />
                </li>
                <li class="col">
                  <img
                    class="zoomin"
                    src="../assets/imgs/home/logo/yingjieer.jpg"
                    style="margin-left: 32px"
                    alt=""
                  />
                </li>
                <li class="col">
                  <img
                    class="zoomin"
                    src="../assets/imgs/home/logo/shangyi.jpg"
                    style="margin-left: 32px"
                    alt=""
                  />
                </li>
              </ul>
            </li>
            <li class="row">
              <ul>
                <li class="col">
                  <img
                    class="zoomin"
                    src="../assets/imgs/home/logo/qiyu.jpg"
                    style="margin-left: 32px"
                    alt=""
                  />
                </li>
                <li class="col">
                  <img
                    class="zoomin"
                    src="../assets/imgs/home/logo/jimei.jpg"
                    style="margin-left: 32px"
                    alt=""
                  />
                </li>
                <li class="col">
                  <img
                    class="zoomin"
                    src="../assets/imgs/home/logo/haoli.jpg"
                    style="margin-left: 10px"
                    alt=""
                  />
                </li>
                <li class="col">
                  <img
                    class="zoomin"
                    src="../assets/imgs/home/logo/yiling.jpg"
                    style="margin-left: 32px"
                    alt=""
                  />
                </li>
                <li class="col">
                  <img
                    class="zoomin"
                    src="../assets/imgs/home/logo/kekemei.jpg"
                    style="margin-left: 32px"
                    alt=""
                  />
                </li>
                <li class="col">
                  <img
                    class="zoomin"
                    src="../assets/imgs/home/logo/zhiyu.jpg"
                    style="margin-left: 32px"
                    alt=""
                  />
                </li>
                <li class="col">
                  <img
                    class="zoomin"
                    src="../assets/imgs/home/logo/feitong.jpg"
                    style="margin-left: 32px"
                    alt=""
                  />
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
      <div class="button-wrap">
        <span
          class="button-left iconfont arrow-left"
          @click="slideHandler(true)"
        ></span>
        <span
          class="button-right iconfont arrow-right"
          @click="slideHandler(false)"
        ></span>
      </div>
    </div>
    <HomeBottom />
    <Homedingwei />
  </div>
</template>

<script>
import Observer from "../utils/observer";
import HomeTop from "@/components/Hometop.vue";
import HomeBottom from "@/components/Homebottom.vue";
import Homedingwei from "@/components/Homedingwei.vue";
import "swiper/css/swiper.css";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
// Vue.use(VueAwesomeSwiper)
export default {
  name: "Home",
  components: {
    HomeTop,
    HomeBottom,
    Homedingwei,
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      swiper: [
        {
          path: "http://pic.yupoo.com/isfy666/695a996e/393b433f.jpg",
        },
        {
          path: "http://pic.yupoo.com/isfy666/04190d49/6c109d2f.jpg",
        },
        {
          path: "http://pic.yupoo.com/isfy666/c35dc34c/22ac2192.jpg",
        },
        {
          path: "http://pic.yupoo.com/isfy666/e13a3060/c52faf58.png",
        },
      ],
      logLeft: 0,
      minLeft: -40,
      showAside: false,
      slidesPerView: 4,
      swiperOptions: {
        // slidesPerView:4,
        autoplay: true,
        centerInsufficientSlides: true,
        // 环路播放
        loop: true,
      },
      animaterEls: [], // 动画元素
      Observer: "",
      Observer2: "",
    };
  },
  methods: {
    add() {
      this.swiper.push({
        path: "http://pic.yupoo.com/isfy666/e13a3060/c52faf58.png",
      });
      this.fn();
    },
    reduce() {
      this.swiper.pop();
      this.fn();
    },
    fn() {
      if (this.swiper.length > 4) {
        this.swiperOptions.loop = true;
      } else {
        this.swiperOptions.loop = false;
      }
    },
    slideHandler(isLeft) {
      console.log(isLeft);
      if (isLeft && this.logLeft < 0) {
        this.logLeft += 20;
      }
      if (!isLeft && this.logLeft > this.minLeft) {
        this.logLeft -= 20;
      }
    },
  },
  mounted() {
    const els = document.querySelectorAll(".animate-el");
    this.Observer = Observer(
      {
        els: els,
      },
      function (el) {
        el.style.visibility = "visible";
        el.classList.add("animate__fadeInDown");
      }
    );
    const els2 = document.querySelectorAll(".zoomin");
    this.Observer2 = Observer(
      {
        els: els2,
      },
      function (el) {
        el.style.visibility = "visible";
        el.classList.add("animate__zoomIn");
      }
    );
    let registerData = {
      companyName: "",
      phoneNumber: "",
      linkman: "",
      companyAdress: "",
      leaveMessage: "",
    };
  },
};
</script>
<style scoped>
.swiper-wrap {
  height: 700px;
}
.swiper-container {
  height: 100%;
  width: 100%;
}
img {
  height: 100%;
}
.swiper-slide {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lunbotu img {
  width: 100%;
  height: 654px;
}
.slideshow_box {
  width: 1085px;
  height: 166px;
  background-color: #fff;
  margin: auto;
  position: relative;
  top: 11px;
  left: 0px;
  border-radius: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 130px;
  padding-right: 130px;
  box-sizing: border-box;
  z-index: 3;
}
.slideshow_box_top {
  width: 141px;
  height: 81px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: center;
}
.slideshow_box_top span {
  margin: 0px;
  padding: 0px;
}
.slideshow_box_top-data {
  font-size: 40px;
  color: #71a5f5;
  font-weight: 500;
}
.slideshow_box_top-text {
  font-size: 15px;
  color: #222832;
  position: absolute;
  top: 54%;
}
.question {
  width: 100%;
  height: 407px;
  position: relative;
  top: -45px;
  box-sizing: border-box;
  padding-top: 50px;
  display: flex;
}
.question_box {
  width: 500px;
  height: 50px;

  font-size: 38px;
  font-weight: 350;
  margin: auto;
  position: absolute;
  left: 40%;
}
.shot-line {
  height: 5px;
  background: #3b8eff;
  width: 51px;
  border-radius: 3px;
  position: absolute;
  top: 26%;
  left: 48%;
}
.concrete {
  width: 1385px;
  height: 225px;
  position: absolute;
  top: 143px;
  left: 13%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
}
.concrete_question {
  width: 169px;
  height: 185px;
}
.concrete_question span {
  margin: 0;
  padding: 0;
}
.question_text {
  width: 128px;
  height: 50px;
  font-size: 22px;
  margin-top: 95px;
  margin-left: 16px;
  text-align: center;
  font-weight: 300;
}
.question .concrete_question .iconfont {
  color: #4a97ff;
  font-size: 4.33333333rem;
  position: relative;
  top: 27%;
  left: 23%;
}
.serve {
  width: 100%;
  height: 765px;
  margin-top: 30px;
  box-sizing: border-box;
  position: relative;
}
.serve_left {
  width: 1180px;
  height: 765px;
  float: left;
}

.serve_left_bg {
  width: 1000px;
  height: 609px;
  background-color: #4b98ff;
  margin-top: 73px;
}
.serve_left_bg img {
  position: absolute;
  top: 0px;
  left: 250px;
  width: 419px;
  height: 132px;
}
.serve_left_bg_text {
  width: 398px;
  height: 160px;
  font-size: 3.933333rem;
  font-weight: 700;
  color: #fff;
  position: absolute;
  top: 160px;
  left: 257px;
}
.serve_left_sass {
  width: 431px;
  height: 364px;
  border-radius: 12px;
  box-sizing: border-box;
  position: absolute;
  top: -1%;
  left: 39%;
  overflow: hidden;
}
.sass_op {
  width: 431px;
  height: 364px;
  background: rgba(0, 0, 0, 0.59);
  z-index: 99;
  box-sizing: border-box;
  position: relative;
  top: 291px;
  border-radius: 19px;
  transition: all 0.3s;
}
.serve_left_sass:hover .sass_op {
  top: 0px;
}
.serve_left_sass:hover .sass_op_in span {
  top: 0px;
}
.serve_left_sass:hover .sass_op_in_p {
  top: 0px;
}
.sass_op_in {
  width: 100%;
  height: 80px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 95px;
}
.sass_op_in span {
  position: relative;
  top: -93px;
  left: -5px;
}
.sass_op_in_p {
  font-size: 35px;
  color: #fff;
  position: relative;
  top: -96px;
}
.sass_op_in .iconfont {
  font-size: 50px;
  color: #fff;
}
.sass_op_in_shot-line {
  height: 5px;
  background: #3b8eff;
  width: 51px;
  border-radius: 3px;
  position: absolute;
  top: 100%;
  left: 43%;
}
.sass_op_in_neirong {
  width: 300px;
  height: 50px;
  position: absolute;
  top: 107px;
}
.sass_op_in_neirong_p {
  font-size: 22px;
  color: #fff;
  text-align: center;
}

.pic_inside1 {
  width: 431px;
  height: 364px;
  background: rgba(0, 0, 0, 0.59);
  z-index: 99;
  box-sizing: border-box;
  position: absolute;
  top: 291px;
  border-radius: 19px;
  transition: all 0.3s;
}
.serve_left_h5:hover .pic_inside1{
  top: 0px;
}
.serve_left_h5:hover .pic_inside1_in_p{
  top:0px;
}
.serve_left_h5:hover .pic_inside1_in span{
  top:0px;
}
.pic_inside1_in_shot-line {
  height: 5px;
  background: #3b8eff;
  width: 51px;
  border-radius: 3px;
  position: absolute;
  top: 100%;
  left: 43%;
}
.pic_inside1_in {
  width: 100%;
  height: 80px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 95px;
}
.pic_inside1_in_p {
  font-size: 35px;
  color: #fff;
  position: relative;
  top: -96px;
}
.pic_inside1_in span{
position: relative;
  top: -93px;
  left: -5px;
}
.pic_inside1_in .iconfont {
  font-size: 50px;
  color: #fff;
}
.pic_inside1_in_neirong {
  width: 300px;
  height: 50px;
  position: absolute;
  top: 107px;
}
.pic_inside1_in_neirong_p {
  font-size: 22px;
  color: #fff;
  text-align: center;
}
.pic_inside2 {
  width: 431px;
  height: 364px;
  background: rgba(0, 0, 0, 0.59);
  z-index: 99;
  box-sizing: border-box;
  position: absolute;
  left: 0px;
  top: 291px;
  border-radius: 19px;
 
    transition: all 0.3s;
 
}
.serve_left_solve:hover .pic_inside2{
  top: 0px;
}
.serve_left_solve:hover .pic_inside2_in_p{
  top: 0px;
}
.serve_left_solve:hover .pic_inside2_in span{
  top: 0px;
}
.pic_inside2_in_shot-line {
  height: 5px;
  background: #3b8eff;
  width: 51px;
  border-radius: 3px;
  position: absolute;
  top: 100%;
  left: 43%;
}
.pic_inside2_in {
  width: 100%;
  height: 80px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 95px;
}
.pic_inside2_in span{
 position: relative;
  top: -93px;
  left: -5px;
}
.pic_inside2_in_p {
  font-size: 35px;
  color: #fff;
       position: relative;
  top: -96px;
}
.pic_inside2_in .iconfont {
  font-size: 50px;
  color: #fff;
}
.pic_inside2_in_neirong {
  width: 350px;
  height: 50px;
  position: absolute;
  top: 107px;
}
.pic_inside2_in_neirong_p {
  font-size: 22px;
  color: #fff;
  text-align: center;
}
.serve_right_ip {
  width: 431px;
  height: 364px;
    border-radius: 19px;
    overflow: hidden;
}
.pic_inside3 {
  width: 431px;
  height: 364px;
  background: rgba(0, 0, 0, 0.59);
  box-sizing: border-box;
    position: relative;
  top: 291px;
  border-radius: 19px;
  transition: all 0.3s;
}
.serve_right_ip:hover .pic_inside3{
  top: 0px;
}

.serve_right_ip:hover .pic_inside3_in_p{
  top: 0px;
}

.serve_right_ip:hover .pic_inside3_in span{
  top: 0px;
}

.pic_inside3_in span{
   position: relative;
  top: -93px;
  left: -5px;
}
.pic_inside3_in_p{
  font-size: 35px;
  color: #fff;
   position: relative;
  top: -96px;
}
.pic_inside3_in_shot-line {
  height: 5px;
  background: #3b8eff;
  width: 51px;
  border-radius: 3px;
  position: absolute;
  top: 100%;
  left: 43%;
}
.pic_inside3_in {
  width: 100%;
  height: 80px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 95px;
}
.pic_inside3_in_p {
  font-size: 35px;
  color: #fff;
}
.pic_inside3_in .iconfont {
  font-size: 50px;
  color: #fff;
}
.pic_inside3_in_neirong {
  width: 350px;
  height: 50px;
  position: absolute;
  top: 107px;
}
.pic_inside3_in_neirong_p {
  font-size: 22px;
  color: #fff;
  text-align: center;
  margin-top: 5px;
}
.serve_right_ip:hover .pic_inside3 {
  display: block;
}
.serve_left_sass img {
  width: 431px;
  height: 364px;
  position: absolute;
  left: 0%;
}
.serve_left_h5{
width: 431px;
  height: 364px;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
    top: 325px;
    left: 262px;
    border-radius: 13px;
}
.serve_left_h5 img {
  width: 431px;
  height: 364px;
  position: absolute;
  top: 0px;
  left: 0px;
}
.serve_left_solve {
  width: 431px;
  height: 364px;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
      top: -40px;
    left: 744px;
    border-radius: 13px;
}
.serve_left_solve img {
  width: 431px;
  height: 364px;
  position: relative;
  top: 0px;
  left: 0px;
}

.serve_right {
  width: 682px;
  height: 765px;
  float: right;
  position: relative;
}
.serve_right_ip img {
  width: 431px;
  height: 364px;
  position: absolute;
  top: 0%;
  z-index: -1;
}
.serve_right_bg {
  width: 682px;
  height: 364px;
  background: #4b98ff url("/src/assets/imgs/home/figure_1.png") left bottom
    no-repeat;
  position: absolute;
  top: 52%;
}
.function_box {
  width: 1200px;
  height: 770px;
  /* background-color: tomato; */
  margin: auto;
  margin-top: 95px;
}
.function_box_top {
  width: 457px;
  height: 142px;
  margin: auto;
  position: relative;
  box-sizing: border-box;
}
.function_box_top li:nth-child(1) {
  width: 457px;
  height: 46px;
  font-size: 2.33333333rem;
  color: #1b1b1b;
  font-weight: 400;
}
.function_box_top li:nth-child(2) {
  width: 457px;
  height: 27px;
  position: absolute;
  top: 84px;
  color: #8e8e8e;
  font-size: 1.533333rem;
}
.function_box_top_shite {
  height: 5px;
  background: #3b8eff;
  width: 51px;
  border-radius: 3px;
  position: absolute;
  top: 100%;
  left: 43%;
}
.function-container p {
  font-size: 30px;
  color: #1b1b1b;
}
.function-container ul {
  position: relative;
}
.function-container .animate-el {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  width: 1200px;
  height: 48px;
  line-height: 48px;
}
.function-container li:nth-child(1) {
  position: absolute;
  top: 104px;
  left: 0px;
}
.function-container li:nth-child(2) {
  position: absolute;
  top: 251px;
}
.function-container li:nth-child(3) {
  width: 1200px;
  height: 48px;
  position: absolute;
  top: 394px;
}

.function-item {
  font-size: 30px;
  color: #3c3c3c;
  display: flex;
  flex-flow: row nowrap;
}
.svg-wrap {
  width: 35px;
  height: 35px;
  margin-right: 28px;
}
.svg-wrap img {
  width: 100%;
  height: 100%;
}
.customization_box {
  width: 1551px;
  height: 760px;
  /* border: 1px solid rgb(226, 10, 10); */
  margin: auto;
  background: url("../assets/imgs/home/bg_1.png") center no-repeat;
  overflow: hidden;
  position: relative;
}
.marketing-caption img {
  width: 940px;
  height: 52px;
  position: absolute;
  top: 80px;
  left: 274px;
}
.marketing-caption h2 {
  margin-top: 33px;
  font-size: 42px;
  font-weight: 500;
  color: #ffffff;
  position: absolute;
  top: 137px;
  left: 519px;
}
.marketing-caption .bot-line {
  width: 487px;
  height: 0;
  margin: 0 auto;
  border-bottom: 3px dotted #fff;
  margin-top: 17px;
  position: absolute;
  top: 226px;
  left: 537px;
}
.marketing-caption p {
  margin-top: 26px;
  font-size: 32px;
  color: #fff;
  position: absolute;
  top: 240px;
  left: 550px;
}

.marketing-container {
  width: 1064px;
  margin: 0 auto;
  margin-top: 92px;
  position: relative;
}
.marketing-container li {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  margin-top: 35px;
  width: 1064px;
  height: 50px;
}
.marketing-container li:nth-child(1) {
  position: absolute;
  top: 262px;
  left: 2px;
}
.marketing-container li:nth-child(2) {
  position: absolute;
  top: 355px;
  left: 2px;
}
.marketing-container li:nth-child(3) {
  position: absolute;
  top: 451px;
  left: 2px;
}
.marketing-container li:nth-child(4) {
  position: absolute;
  top: 544px;
  left: 2px;
}
.marketing-container .marketing-item {
  min-width: 210px;
  font-size: 28px;
  font-weight: 500;
  color: #fff;
  text-align: left;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
.marketing-container .iconfont-pic {
  display: inline-block;
  width: 35px;
  height: 35px;
  background: url("../assets/imgs/home/icon/icon_hook.png") no-repeat;
  background-size: cover;
  margin-right: 22px;
}
.solution_box {
  width: 100%;
  height: 743px;
  box-sizing: border-box;
  margin-top: 97px;
  position: relative;
  top: -83px;
}
.solution_box_top {
  width: 499px;
  height: 146px;
  margin: auto;
}
.solution_box_top1 {
  width: 303px;
  height: 44px;
  margin: auto;
  font-size: 35px;
  font-weight: 700;
}
.solution_box_top2 {
  width: 499px;
  height: 28px;
  color: #8e8e8e;
  text-align: center;
  margin-top: 40px;
  font-size: 1.63333333rem;
}
.solution_box_shite {
  height: 5px;
  background: #3b8eff;
  width: 51px;
  border-radius: 3px;
  margin: auto;
  margin-top: 25px;
}
.solution_box_img {
  position: absolute;
  top: 27%;
  left: 24%;
}
.solution_box_last {
  width: 936px;
  height: 74px;
  position: absolute;
  top: 90%;
  left: 27%;
}
.solution_box_last p {
  text-align: center;
  font-size: 22px;
  color: #363636;
  line-height: 1.73333333rem;
}
.solution_box_last p:nth-child(1) {
  margin-bottom: 13px;
}
.scope {
  width: 100%;
  height: 244px;
  position: relative;
}
.scope_left {
  width: 196px;
  height: 244px;
  background-color: #4b98ff;
  margin: 0;
  padding: auto;
}
.scope_right {
  width: 1041px;
  height: 244px;
  background-color: #4b98ff;
  float: right;
}
.scope_right p {
  width: 789px;
  height: 114px;
  position: absolute;
  top: 20%;
  left: 49%;
  font-size: 25px;
  line-height: 42px;
}
.scope_cenent img:nth-child(1) {
  position: absolute;
  top: 1%;
  left: 12%;
  width: 576px;
  height: 43px;
}
.scope_cenent img:nth-child(2) {
  position: absolute;
  top: 177px;
  left: 200px;
  width: 577px;
  height: 58px;
}
.scope_cenent p {
  position: absolute;
  top: 24%;
  left: 12%;
  color: #5a8ced;
  font-weight: 500;
  font-size: 46px;
}
.scope_cenent span {
  font-size: 30px;
  color: #1b1b1b;
  position: absolute;
  top: 56%;
  left: 12%;
}
.partner_box {
  width: 1292px;
  height: 632px;
  margin: auto;
  margin-top: 94px;
  margin-bottom: 67px;
}
.partner_box_1 {
  width: 632px;
  height: 142px;
  margin: auto;
}
.partner_box_1 h2 {
  font-size: 30px;
  font-weight: 600;
  text-align: center;
}
.partner_box_1 p {
  color: #8e8e8e;
  font-size: 20px;
  text-align: center;
  margin-top: 32px;
}
.partner_box_1 .shout {
  display: block;
  width: 46px;
  height: 4px;
  border-radius: 10px;
  background-color: #3b8eff;
  margin: auto;
  margin-top: 20px;
}
.partner_box_2 {
  width: 1313px;
  height: 346px;
  /* background-color: tomato; */
  margin-top: 40px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}
.log-slide {
  position: absolute;
  left: 0;
  top: 0;
  transition: left 0.3s;
}
.row ul {
  display: flex;
  flex-flow: row nowrap;
}
.row:last-child {
  margin-top: 36px;
}
.col {
  flex: none;
  width: 227px;
  height: 155px;
  border: 1px solid #c2c2c2;
  margin-right: 40px;
  box-sizing: border-box;
}
.button-wrap {
  width: 150px;
  margin: auto;
  margin-top: 48px;
}
.button-wrap span {
  margin-left: 30px;
  color: #c2c2c2;
  font-size: 24px;
  display: inline-block;
  width: 47px;
  height: 47px;
  border-radius: 50%;
  line-height: 47px;
  text-align: center;
  border: 2px solid #c2c2c2;
  margin: 0 9px;
}
</style>